<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户系统测试 - MarkEdit</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
    <style>
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f6f8fa;
        }
        
        .container {
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            background: white;
            border-bottom: 1px solid #e1e4e8;
            padding: 0 16px;
        }
        
        .toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
        }
        
        .app-body {
            flex: 1;
            display: flex;
            overflow: hidden;
        }
        
        .sidebar {
            width: 300px;
            background: white;
            border-right: 1px solid #e1e4e8;
            display: flex;
            flex-direction: column;
        }
        
        .sidebar-header {
            padding: 16px;
            border-bottom: 1px solid #e1e4e8;
        }
        
        .sidebar-content {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }
        
        .main-content {
            flex: 1;
            padding: 40px;
            overflow-y: auto;
        }
        
        .test-info {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .test-info h2 {
            margin-top: 0;
            color: #24292f;
        }
        
        .test-info ul {
            padding-left: 20px;
        }
        
        .test-info li {
            margin-bottom: 8px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <div class="toolbar">
                <div class="toolbar-left">
                    <button id="new-file" class="btn btn-secondary">新建</button>
                    <button id="open-file" class="btn btn-secondary">打开</button>
                    <div class="save-dropdown">
                        <button id="save-file" class="btn btn-primary">保存</button>
                        <button id="save-dropdown-btn" class="btn btn-primary dropdown-toggle" title="保存选项">▼</button>
                        <div id="save-dropdown-menu" class="dropdown-menu">
                            <button id="save-local" class="dropdown-item">保存到本地</button>
                            <button id="save-account" class="dropdown-item">保存到我的文件</button>
                            <button id="save-as" class="dropdown-item">另存为...</button>
                        </div>
                    </div>
                </div>
                <div class="toolbar-center">
                    <h1>MarkEdit 账户系统测试</h1>
                </div>
                <div class="toolbar-right">
                    <div class="account-actions">
                        <button id="login-btn" class="btn btn-primary">登录</button>
                        <button id="register-btn" class="btn btn-secondary">注册</button>
                        <div id="user-menu" class="user-menu" style="display: none;">
                            <span id="username-display" class="username"></span>
                            <button id="logout-btn" class="btn btn-small">退出</button>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="app-body">
            <aside id="sidebar" class="sidebar">
                <div class="sidebar-header">
                    <div class="sidebar-tabs">
                        <button id="local-files-tab" class="tab-btn active" data-tab="local-files">本地文件</button>
                        <button id="account-files-tab" class="tab-btn" data-tab="account-files">我的文件</button>
                    </div>
                    <div class="sidebar-tools">
                        <button id="refresh-tree" class="tool-btn" title="刷新">🔄</button>
                        <button id="toggle-sidebar" class="tool-btn" title="隐藏侧边栏">◀</button>
                    </div>
                </div>
                <div class="sidebar-content">
                    <!-- 本地文件浏览器 -->
                    <div id="local-files" class="tab-content active">
                        <div id="directory-tree" class="directory-tree">
                            <div class="tree-loading">
                                <span>本地文件浏览功能（需要后端支持）</span>
                            </div>
                        </div>
                    </div>
                    <!-- 账户文件浏览器 -->
                    <div id="account-files" class="tab-content">
                        <div id="account-login-prompt" class="login-prompt">
                            <p>请先登录以访问您的文件</p>
                            <button id="prompt-login-btn" class="btn btn-primary">登录</button>
                        </div>
                        <div id="account-file-tree" class="directory-tree" style="display: none;">
                            <div class="account-file-actions">
                                <button id="new-folder-btn" class="btn btn-small">新建文件夹</button>
                                <button id="upload-file-btn" class="btn btn-small">上传文件</button>
                            </div>
                            <div id="account-tree-content" class="tree-loading">
                                <span>加载中...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>

            <main class="main-content">
                <div class="test-info">
                    <h2>功能测试说明</h2>
                    <p>这是一个用于测试 MarkEdit 账户系统和文件管理的页面。您可以：</p>
                    <ul>
                        <li>点击"注册"按钮创建新账户</li>
                        <li>点击"登录"按钮登录现有账户</li>
                        <li>登录后可以查看用户信息和退出登录</li>
                        <li>切换到"我的文件"选项卡查看账户文件管理功能</li>
                        <li>测试文件夹创建、文件上传等功能</li>
                    </ul>
                    <p>注意：这是前端测试页面，使用模拟的API响应。</p>
                </div>
            </main>
        </div>
    </div>

    <!-- 登录模态框 -->
    <div id="login-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>用户登录</h2>
                <span class="close" data-modal="login-modal">&times;</span>
            </div>
            <div class="modal-body">
                <form id="login-form">
                    <div class="form-group">
                        <label for="login-username">用户名:</label>
                        <input type="text" id="login-username" name="username" required>
                    </div>
                    <div class="form-group">
                        <label for="login-password">密码:</label>
                        <input type="password" id="login-password" name="password" required>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">登录</button>
                        <button type="button" class="btn btn-secondary" data-modal="login-modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="register-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>用户注册</h2>
                <span class="close" data-modal="register-modal">&times;</span>
            </div>
            <div class="modal-body">
                <form id="register-form">
                    <div class="form-group">
                        <label for="register-username">用户名:</label>
                        <input type="text" id="register-username" name="username" required>
                    </div>
                    <div class="form-group">
                        <label for="register-email">邮箱:</label>
                        <input type="email" id="register-email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="register-password">密码:</label>
                        <input type="password" id="register-password" name="password" required>
                    </div>
                    <div class="form-group">
                        <label for="register-confirm-password">确认密码:</label>
                        <input type="password" id="register-confirm-password" name="confirmPassword" required>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">注册</button>
                        <button type="button" class="btn btn-secondary" data-modal="register-modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 引入JavaScript文件 -->
    <script src="/static/js/auth.js"></script>
    <script src="/static/js/fileManager.js"></script>
    <script src="/static/js/saveManager.js"></script>
    <script src="/static/js/exportManager.js"></script>
    <script src="/static/js/tocManager.js"></script>
</body>
</html>